<template>
  <div class="password-input">
    <div class="strength-bar">
      <span :class="`strength ${strengthClass}`"></span>
    </div>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue'
import zxcvbn from 'zxcvbn'
 
const props = defineProps({
  password: {
    type: [String, Number],
    default: ''
  }
})

const strengthClass = computed(() => {
  if (!props.password) return 'weak'
  const score = zxcvbn(props.password).score
  if (score === 0) return 'weak'
  if (score === 1) return 'medium'
  if (score === 2) return 'strong'
  return 'very-strong'
})
</script>
 
<style scoped lang="scss">
.password-input {
  position: relative;
  margin-top: 11px;
}
.strength-bar {
  width: 240px;
  height: 10px;
  background: #eee;
  margin-top: 5px;
}
.strength {
  height: 100%;
  display: block;
}
.strength.weak { background: red; width: 20%; }
.strength.medium { background: orange; width: 40%; }
.strength.strong { background: yellow; width: 60%; }
.strength.very-strong { background: green; width: 80%; }
</style>